<template>
  <el-upload
      class="upload-demo"
      :action="file.url"
      v-model:file-list="fileList"
      :list-type="file.listType"
      :auto-upload="file.autoUpload"
      v-bind="file.innerAttrs"
      :data="data"
      :before-upload="beforeUpload"
      :on-remove="events.handleRemove || (()=>{})"
      :on-success="events.handleSuccess || (()=>{})"
      :on-change="events.handleChange || (()=>{})"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      将文档拖拽到此处，或 <em>点击上传</em>
      <div>支持文件格式：.rar .zip .doc .docx .pdf ，单个文件最大10mb</div>
    </div>
  </el-upload>
</template>

<script setup lang="ts">
import {
  ref,
  defineProps,
  toRef,
  toRefs,
  defineExpose,
  getCurrentInstance
} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import type {UploadRawFile} from "element-plus";

/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;
const props = defineProps<{
  file: Object,
  data?: Object,
  fileList?: Object,
  info?: Object
  events?: Object
}>();


const {file: uploadFile, fileList, info} = toRefs(props);

//上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。
const beforeUpload = (rawFile: UploadRawFile) => {
  console.log('===>> before upload');
  console.log('原文件大小：%s', rawFile.size);

  if (rawFile.size / 1024 / 1024 > uploadFile.value.acceptMaxSize) {
    ElMessage({
      type:'warning',
      duration: 5000,
      message: `上传失败！文件超过${uploadFile.value.acceptMaxSize}M大小限制!`
    });
    fileList.value = [];
    return false;
  }
}
// 移除前
const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`是否删除上传文件：${uploadFile.name} ？`).then(() => true, () => false)
}

const getInfo = ()=> info.value;

defineExpose({
  getInfo
})
</script>

<style scoped>

</style>
